<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品防伪查询</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        #app{
            text-align: center;
        }
        #sp{
            font-size: 26px;
            font-family: 楷体;
        }
        #ok{
            border: 1px solid ;
            width: 360px;
            height: 200px;
            position: relative;
            left: 36%;
            display: none;
        }
        #no{
            width: 360px;
            height: 150px;
            position: relative;
            left: 36%;
            display: none;
        }
        #empty{
            width: 360px;
            height: 100px;
            position: relative;
            left: 36%;
            display: none;
        }


    </style>
</head>
<body>

<div id="app">
    <br>
    <h3>产品防伪查询</h3>
    <br>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" >
        <el-form-item label="">
            <el-input id="inp"  v-model="formInline.id" placeholder="请输入产品防伪码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button id="but" type="primary" icon="el-icon-search" @click="onSubmit" >查询</el-button>
        </el-form-item>
    </el-form>
    <br>
    <div id="know" style="font-size: xx-small">
        查询步骤: ①刮开防伪图层 > ②输入防伪码 > ③点击查询 > ④获取结果
    </div>
    <br>
    <div id="ok">
        <el-table  :data="dataTable">
            <el-table-column lablel="查询结果" >
                <template slot-scope="scope">
                    <span id="sp">查询结果:<br>您所查询的是 <b>{{ scope.row.companyName }}</b> 公司生产的产品，是正牌产品,请放心使用。</span>
                </template>
            </el-table-column>

        </el-table>
    </div>

    <div id="no" >
        <br>
        <span style="font-family: 楷体;font-size: 26px;text-align: left;">
            查询结果:<br>您所输入的防伪码本系统不存在，谨防假冒!
        </span>
    </div>
    <div id="empty" >
        <br>
        <span style="font-family: 楷体;font-size: 26px;text-align: left;color: #ff1d06">
           请输入防伪码!
        </span>
    </div>
    <br>
    <div>
        查询方式
        <el-row :gutter="20">
            <el-col :span="4"><p></p></el-col>
            <el-col :span="4"><!--二维码防伪查询-->
                <!--<div class="grid-content bg-purple">-->
                    <el-button type="primary" icon="el-icon-full-screen"></el-button>
               <!-- </div>-->
            </el-col>
            <el-col :span="4"><!--短信防伪查询-->
                <div class="grid-content bg-purple">
                    <el-button type="primary" icon="el-icon-chat-dot-round"></el-button>
                </div>
            </el-col>
            <el-col :span="4"><!--电话防伪查询-->
                <div class="grid-content bg-purple">
                    <el-button type="primary" icon="el-icon-phone-outline"></el-button>
                </div>
            </el-col>
            <el-col :span="4"><!--官网防伪查询-->
                <div class="grid-content bg-purple">
                    <a href="https://www.12315com.com/"><el-button type="primary" icon="el-icon-s-platform"></el-button></a>
                </div>
            </el-col>
            <el-col :span="4"><p></p></el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="4"> <p></p></el-col>
            <el-col :span="4"><!--二维码防伪查询-->
                <p>二维码防伪查询</p>
            </el-col>
            <el-col :span="4"><!--短信防伪查询-->
                <div class="grid-content bg-purple">
                    <p>短信防伪查询</p>
                </div>
            </el-col>
            <el-col :span="4"><!--电话防伪查询-->
                <div class="grid-content bg-purple">
                    <p>服务热线:400-777-4006</p>
                </div>
            </el-col>
            <el-col :span="4"><!--官网防伪查询-->
                <div class="grid-content bg-purple">
                    <p>12315查询</p>
                </div>
            </el-col>
            <el-col :span="4"><p></p></el-col>

        </el-row>
    </div>
</div>
<ing src="/js/imgs.chaxun3.png"></ing>
<ing src="../static/js/imgs.chaxun3.png"></ing>
<ing src="/js/imgs.chaxun3.png"></ing>

<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                dataTable:null,
                formInline:{
                    id: ''
                },
                checkProduct:{
                    id:'',
                    companyName:'',
                    companyProvince:'',
                    companyBrand:'',
                    productName:'',
                    productPrice:'',
                    productBrand:'',
                    productEnterprise:'',
                    productLocal:'',
                    productMaterial:'',
                    productShelfLife:'',
                    productQuality:''
                }
            }
        },
        methods:{

            onSubmit(){
                console.log("security_code");
                this.id = this.formInline.id;
                axios.get("/checkFind?id="+this.id).then(value => {
                    var ok=document.getElementById('ok');
                    var no=document.getElementById('no');
                    var empty=document.getElementById('empty');
                    if(this.id == ''){
                        console.log("id为空！");
                        no.style.display='none';
                        ok.style.display='none';
                        empty.style.display='block';
                    }else {
                        if (value.data.code == 1){
                            console.log("ok");
                            this.dataTable=value.data.data;
                            if (this.dataTable.length > 0 ){
                                console.log(value.data.data[0]);
                                console.log("数据不为空");
                                ok.style.display='block';
                                no.style.display='none';
                                empty.style.display='none';
                            }else {
                                console.log("数据为空");
                                no.style.display='block';
                                ok.style.display='none';
                                empty.style.display='none';
                            }

                        }else {
                            console.log("no");
                        }
                    }
                })
            },
        }
    });

</script>

</body>
</html>